<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax请求进度的控制</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
</head>
<body>
    <div class="progress">
        <div id="pros" class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        </div>
    </div>
    <button id="trigger" type="button" >请求数据</button>
    <script>
        let pros = document.querySelector("#pros");
        let trigger = document.getElementById("trigger");
        trigger.onclick = function(){
            var xhr = new XMLHttpRequest();
            xhr.onprogress = function(event){
                console.log(event.loaded, event.total);
                if(event.lengthComputable){
                    var loaded = parseInt(event.loaded/event.total*100)+"%";
                    $('#pros').width(loaded);
                    $('#pros').text(loaded);
                }
            }
            xhr.open("get", "https://mock.apifox.cn/m2/1322454-0-default/63272497", true);
            xhr.send(null);
        }
    </script>



<script>
    function xhrRequest() {
        // const {url, method='GET', onProgress, data = null} = options;
        return new Promise((resolve) => {
            const xhr = new XMLHttpRequest();
            xhr.addEventListener('readystatechage', () => {
                if (xhr.readyState === xhr.DONE) {
                    resolve(xhr.responseText);
                }
            });
            xhr.onprogress = function(e) {
                console.log(e.loaded);
                onProgress && onProgress({
                    loaded: e.loaded,
                    total: e.total
                });
            }; 
            xhr.open('get', 'https://mock.apifox.cn/m2/1322454-0-default/63272497');
            xhr.send(null);
        });
    };
    function fetchDemo() {
        const {url, method='GET', onProgress, data = null} = options;
        return new Promise( async (resolve) => {
            const resp = await fetch(url, {
                method,
                body: data
            });
            console.log(resp.headers.get('content-length'))
            // 总量
            const total = resp.headers.get('content-length');
            const decoder = new TextDecoder();
            let body = '';
            const reader = resp.body.getReader();
            let loaded = 0;
            while(true) {
                const {done, vaule} = await reader.read();
                if (done) {
                    break;
                }
                loaded += vaule.length;
                body += decoder.decode(vaule);
                console.log(vaule.length);
            }
            // const body = await resp.text();
            resolve(body);

        });
    };

</script>


</body>
</html>



<!-- 


请求数据量比较大的情境中，在传输数据的过程中给用户以直观的视觉感知，这样会提升用户的体验。或者应用在网络较差的情况下，请求时间可能会较长，当用户触发网络请求后，弹出一个包含进度条的弹出框，当请求完毕后，弹出框自动消失。

当然，表示进度，并不一定要使用条形，我们可以换成 环形等形状，大致的原理都是一样的，将后台返回的进度动态改变前台的缓冲进度。

-->